﻿
$(document).ready(function () {
    $.getJSON("api/groups", function (data) {

        var sampleSVG = d3.select("#viz")
                            .append("svg")
                            .attr("width", 1024)
                            .attr("height", 768);

        var tBubble = sampleSVG.selectAll("circle").data(data);

        var nodes = tBubble.enter()
                        .append("g").attr("transform", function (d) { return "translate(" + (d.Id * 100 + 50) + "," + 50 + ")"; })

        nodes.append("circle")
                       .attr("r", 0)
                       .transition()
                       .attr("r", 40);

        nodes.append("svg:text")
               .attr("text-anchor", "middle")
               .text(function (d) { return d.Name; });

        tBubble
             .style("stroke", "gray")
             .style("fill", "white")
             .on("mouseover", function () { d3.select(this).style("fill", "aliceblue"); })
             .on("mouseout", function () { d3.select(this).style("fill", "white"); });


    }).fail(function (jqXHR, status, err) {
        alert(err);
    });
});